<template>
  <div class="food-view">
    <!-- 顶部大图 -->
    <div class="hero-section">
      <div class="hero-image">
        <img
          src="@/assets/images/contentStation/mswh.jpg"
          alt="福州美食"
          class="main-image"
        />
        <div class="hero-overlay">
          <div class="hero-content">
            <h1 class="hero-title">福州美食文化</h1>
            <p class="hero-subtitle">品味千年古城的舌尖记忆</p>
            <div class="food-highlights">
              <div class="highlight-item">
                <i class="fas fa-utensils"></i>
                <span>百年传承</span>
              </div>
              <div class="highlight-item">
                <i class="fas fa-star"></i>
                <span>闽菜精髓</span>
              </div>
              <div class="highlight-item">
                <i class="fas fa-map-marker-alt"></i>
                <span>地道风味</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 传统美食介绍 -->
    <section class="traditional-food-section">
      <div class="section-header">
        <h2>传统美食介绍</h2>
        <div class="section-divider"></div>
      </div>

      <div class="intro-text">
        <p>
          福州美食历史悠久，以其鲜、香、淡的特色闻名，融合了闽菜的精髓，同时吸收了海洋文化的特点，形成了独特的饮食文化。以下是福州最具代表性的传统美食：
        </p>
      </div>

      <div class="food-items">
        <div
          class="food-card"
          v-for="(food, index) in traditionalFoods"
          :key="index"
          @mouseenter="handleCardHover(index, true)"
          @mouseleave="handleCardHover(index, false)"
        >
          <div class="food-card-image">
            <img :src="food.image" :alt="food.name" class="food-image" />
            <div class="food-category">{{ food.category }}</div>
          </div>
          <div class="food-card-content">
            <h3 class="food-name">{{ food.name }}</h3>
            <p class="food-description">{{ food.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 美食特色区 -->
    <section class="food-features">
      <div class="features-container">
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-pepper-hot"></i>
          </div>
          <h3>鲜香味浓</h3>
          <p>福州菜注重原汁原味，以鲜活食材为基础，保留食物的本真味道</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-tint"></i>
          </div>
          <h3>淡而不薄</h3>
          <p>口味清淡但不失层次感，注重汤品和原汁原味的保留</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-ship"></i>
          </div>
          <h3>海味丰富</h3>
          <p>地处沿海，海鲜料理独具特色，新鲜美味</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-history"></i>
          </div>
          <h3>历史悠久</h3>
          <p>传承千年的烹饪技艺，蕴含深厚的文化底蕴</p>
        </div>
      </div>
    </section>

    <!-- 店铺推荐 -->
    <section class="restaurant-section">
      <div class="section-header">
        <h2>美食店铺推荐</h2>
        <div class="section-divider"></div>
      </div>

      <div class="intro-text">
        <p>
          以下是福州当地知名的传统美食店铺，这些店铺不仅传承了福州美食的制作技艺，也保留了福州的饮食文化特色。
        </p>
      </div>

      <div class="restaurant-grid" v-loading="loading">
        <div
          class="restaurant-card"
          v-for="restaurant in restaurants"
          :key="restaurant.id"
        >
          <div class="restaurant-card-image">
            <img
              :src="restaurant.coverImage"
              :alt="restaurant.name"
              class="restaurant-image"
            />
            <div class="restaurant-rating">
              <i class="fas fa-star"></i>
              <span>{{ restaurant.rating }}</span>
            </div>
          </div>
          <div class="restaurant-card-content">
            <h3 class="restaurant-name">{{ restaurant.name }}</h3>
            <p class="restaurant-description">{{ restaurant.description }}</p>
            <div class="restaurant-tags">
              <span
                v-for="(tag, index) in restaurant.tags"
                :key="index"
                class="tag"
                >{{ tag }}</span
              >
            </div>
            <div class="restaurant-info">

              <p class="restaurant-hours">
                <i class="far fa-clock"></i> {{ restaurant.businessHours }}
              </p>
              <p class="restaurant-phone">
                <i class="fas fa-phone"></i> {{ restaurant.phone }}
              </p>
              <p class="restaurant-address">
                <i class="fas fa-map-marker-alt"></i> {{ restaurant.address }}
              </p>
            </div>
            <button
              class="restaurant-btn"
              @click="viewRestaurantDetails(restaurant)"
            >
              查看详情
            </button>
          </div>
        </div>
      </div>
    </section>

    <app-footer></app-footer>

    <!-- 店铺详情弹窗 -->
    <RestaurantDetailModal
      v-model:visible="showDetailModal"
      :restaurant="selectedRestaurant"
    />
  </div>
</template>

<style scoped>
.food-view {
  width: 100%;
  min-height: 100vh;
  background-color: #f9f9f9;
}

/* 顶部大图样式 */
.hero-section {
  width: 100%;
  height: 70vh;
  overflow: hidden;
  position: relative;
}

.hero-image {
  width: 100%;
  height: 100%;
  position: relative;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-section:hover .main-image {
  transform: scale(1.05);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.7)
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  padding: 0 20px;
}

.hero-title {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 0.8s ease-out;
}

.hero-subtitle {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 1s ease-out 0.2s both;
}

.food-highlights {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 0.4s both;
}

.highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.highlight-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
}

.highlight-item i {
  font-size: 1.8rem;
  color: #ffd700;
}

.highlight-item span {
  font-size: 1rem;
  font-weight: 500;
}

/* 通用部分样式 */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2.5rem;
  color: #333;
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.section-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #e74c3c, #f39c12);
  margin: 0 auto;
  border-radius: 2px;
}

.intro-text {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
  line-height: 1.8;
  color: #666;
  font-size: 1.1rem;
}

/* 传统美食介绍样式 */
.traditional-food-section {
  padding: 5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.food-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.food-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.food-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.food-card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.food-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.food-card:hover .food-image {
  transform: scale(1.08);
}

.food-category {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #e74c3c;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 10;
}

.food-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.food-name {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.food-description {
  line-height: 1.6;
  color: #666;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.food-card-footer {
  margin-top: auto;
}

.food-detail-btn {
  background: linear-gradient(90deg, #e74c3c, #f39c12);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.food-detail-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

/* 美食特色区样式 */
.food-features {
  background: linear-gradient(135deg, #f9f9f9, #f1f1f1);
  padding: 5rem 2rem;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.5rem;
}

.feature-item {
  text-align: center;
  padding: 1rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #e74c3c, #f39c12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
  font-size: 2rem;
}

.feature-item h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #333;
}

.feature-item p {
  line-height: 1.6;
  color: #666;
}

/* 店铺推荐样式 */
.restaurant-section {
  padding: 5rem 2rem;
  background-color: white;
}

.restaurant-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
}

.restaurant-card {
  background-color: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.restaurant-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.restaurant-card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.restaurant-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.restaurant-card:hover .restaurant-image {
  transform: scale(1.08);
}

.restaurant-rating {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffd700;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.restaurant-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.restaurant-name {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.restaurant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag {
  background: #e74c3c;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
}

.restaurant-info {
  margin-bottom: 1.5rem;
}

.restaurant-description {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.restaurant-hours,
.restaurant-phone,
.restaurant-address {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  color: #666;
  font-size: 0.95rem;
}

.restaurant-hours i,
.restaurant-phone i,
.restaurant-address i {
  margin-right: 0.5rem;
  color: #e74c3c;
}

.restaurant-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
  margin-top: auto;
}

.restaurant-btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

/* 加载状态样式 */
.loading-container {
  text-align: center;
  padding: 3rem;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误提示样式 */
.error-container {
  text-align: center;
  padding: 3rem;
  color: #e74c3c;
}

.error-container i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.retry-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 1rem;
}

.retry-btn:hover {
  background: #2980b9;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    height: 60vh;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .food-highlights {
    gap: 1rem;
  }

  .highlight-item {
    padding: 0.75rem 1rem;
  }

  .highlight-item i {
    font-size: 1.5rem;
  }

  .section-header h2 {
    font-size: 2rem;
  }

  .traditional-food-section,
  .food-features,
  .restaurant-section {
    padding: 3rem 1.5rem;
  }

  .food-items,
  .features-container,
  .restaurant-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .food-card-image,
  .restaurant-card-image {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    height: 50vh;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .food-highlights {
    flex-direction: column;
    align-items: center;
  }

  .highlight-item {
    width: 200px;
  }

  .section-header h2 {
    font-size: 1.8rem;
  }
}
</style>

<script>

import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import AppFooter from "../components/Footer/Footer.vue";
import RestaurantDetailModal from "../components/Food/RestaurantDetailModal.vue";
import { getFoodStoreList } from "@/api/user";

export default {
  name: "FoodView",
  components: {
    AppFooter,
    RestaurantDetailModal,
  },
  setup() {
    // 传统美食数据
    const traditionalFoods = ref([
      {
        name: "佛跳墙",
        category: "闽菜之王",
        image: new URL("@/assets/images/food/ftq.jpg", import.meta.url).href,
        description:
          '福州传统名菜，被誉为"闽菜之王"。由多种山珍海味熬制而成，香气四溢，营养丰富。据传，此菜香气扑鼻，连佛都忍不住要跳墙来品尝。',
      },
      {
        name: "福州鱼丸",
        category: "传统小吃",
        image: new URL("@/assets/images/food/yw.jpg", import.meta.url).href,
        description:
          '福州著名小吃，以鲜鱼为原料，口感Q弹，味道鲜美，是福州人喜爱的传统美食。福州鱼丸讲究"皮有嚼劲，馅有汁味"，制作工艺已有数百年历史。',
      },
      {
        name: "肉燕",
        category: "特色美食",
        image: new URL("@/assets/images/food/ry.jpg", import.meta.url).href,
        description:
          '福州特色小吃，用猪肉和淀粉制成燕皮，包入肉馅，煮熟后口感独特，风味十足。肉燕又称为"太平燕"，在福州有"无燕不成宴"的说法。',
      },
      {
        name: "锅边糊",
        category: "传统早点",
        image: new URL("@/assets/images/food/gbh.jpg", import.meta.url).href,
        description:
          '福州传统早点，用米浆在锅边制成薄片，加入各种配料煮制而成，味道鲜美，营养丰富。福州人常说："锅边糊配油饼，吃了有精神"。',
      },
    ]);

    // 店铺数据（从API获取）
    const restaurants = ref([]);
    const loading = ref(false);


    // 加载店铺列表
    const loadRestaurants = async () => {
      try {
        loading.value = true;
        const data = await getFoodStoreList({});

        // 转换API数据格式为组件需要的格式
        restaurants.value = data.records.map((store) => ({
          id: store.id,
          name: store.name,
          description: store.description,
          coverImage: `http://192.168.199.231:9000/fznostalgia/food/${store.coverImage}`,
          rating: store.rating,
          category: store.category,
          businessHours: store.businessHours,
          phone: store.phone,
          address: store.address,
          status: store.status,
          tags: [store.category, store.status],
          images: store.foodStoreImages?.map(img => 
            `http://192.168.199.178:9000/fznostalgia/foodstore${img.imageUrl}`
          ) || []
        }))
      } catch (error) {
        ElMessage.error("加载店铺信息失败: " + error.message);
        console.error("加载店铺列表失败:", error);
      } finally {
        loading.value = false;
      }
    };

    // 弹窗相关状态
    const showDetailModal = ref(false);
    const selectedRestaurant = ref(null);

    // 查看店铺详情
    const viewRestaurantDetails = (restaurant) => {
      selectedRestaurant.value = restaurant;
      showDetailModal.value = true;
    };


    // 组件挂载时加载数据
    onMounted(() => {
      loadRestaurants();
    });

    return {
      traditionalFoods,
      restaurants,
      loading,
      showDetailModal,
      selectedRestaurant,
      viewRestaurantDetails,
      loadRestaurants,
    };
  },
};
</script>
